<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '订单详情',
  },
}
</route>

<template>
  <view class="order-page" v-if="orderInfo.id">
    <div class="status">{{ getStatusName(orderInfo.status) }}</div>

    <HotelInfo :orderInfo="orderInfo" :layoutInfo="layoutInfo" />

    <OrderInfo :orderInfo="orderInfo" :layoutInfo="layoutInfo" />

    <div class="bottom-bar" v-if="!orderInfo.isComment && orderInfo.status === 3">
      <div
        class="btn active"
        @click="
          to('/pages-sub/hotel/evaluate/add', { id: orderInfo.id, layoutId: orderInfo.layoutId })
        "
      >
        评价
      </div>
    </div>
    <div class="bottom-bar" v-if="!orderInfo.isComment && orderInfo.status === 0">
      <div class="btn active" @click="placeOrder()">立即支付</div>
    </div>
  </view>
  <Seat v-else :loading="loading" />
</template>

<script lang="ts" setup>
import { to } from '@/utils/page'
import { orderStatus, wxPay, msgSuccess, msgNone } from '@/utils/index'
import HotelInfo from './components/HotelInfo'
import OrderInfo from './components/OrderInfo'

let id = null
onLoad((query) => {
  if (query.id) {
    id = query.id
    getData()
  }
})

onShow(() => {
  getData()
})

const orderInfo = ref<any>({})
const loading = ref(false)
function getData() {
  if (id) {
    loading.value = true
    uni.showLoading()
    http
      .get('/room-order-app/detail', {
        id,
      })
      .then((res: any) => {
        orderInfo.value = res
        getHotel(res.layoutId)
      })
      .finally(() => {
        loading.value = false
        uni.hideLoading()
      })
  }
}

// 获取酒店信息
const layoutInfo = reactive<any>({})
function getHotel(hotelId) {
  http
    .get('/hotels-layout-app/open/detail', {
      id: hotelId,
    })
    .then((res: any) => {
      Object.assign(layoutInfo, res)
      if (layoutInfo.imgUrls) {
        layoutInfo.imgUrls = layoutInfo.imgUrls.split(',')
      }
    })
}

function getStatusName(status) {
  return orderStatus.find((item) => item.value === status).label || status
}

// 重新下单
function placeOrder() {
  uni.showLoading()
  http
    .post('/room-order-app/repay', {
      orderId: orderInfo.value.id,
      payId: orderInfo.value.payId,
    })
    .then((res: any) => {
      if (res && res.extData) {
        const { timeStamp, nonceStr, packageVal, signType, paySign } = res.extData
        wxPay({
          timeStamp,
          nonceStr,
          package: packageVal,
          signType,
          paySign,
        })
          .then(() => {
            getData()
            msgSuccess('支付成功')
          })
          .finally(() => {
            uni.hideLoading()
          })
      }
    })
    .catch(() => {
      uni.hideLoading()
    })
}
</script>

<style lang="scss" scoped>
.order-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 160rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
  background-color: var(--bgc4);

  .status {
    padding: 40rpx 50rpx 80rpx;
    margin-bottom: -40rpx;
    font-size: 46rpx;
    font-weight: 600;
    line-height: 1;
    color: var(--sc1);
    background: linear-gradient(180deg, #ffffff 0%, rgba(#ffffff, 0) 100%);
  }

  :deep(.model) {
    margin: 0 30rpx 28rpx;
    background-color: #fff;
    border-radius: 30rpx;
  }

  .bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 24rpx 30rpx;
    padding-bottom: 24rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx) !important;
    background: #ffffff;
    box-shadow: 0px -7rpx 23rpx rgba(#a6a6a6, 0.1);

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 304rpx;
      height: 92rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      text-align: center;
      background: var(--color1);
      border-radius: 50rpx;
      box-shadow: 0px 17rpx 29rpx rgba(#1f2026, 0.3);
    }
  }
}
</style>
